<template>
    <!--气象参数-->
    <div class="meteorological_parameters">
        <CommonTitleComponent text="气象参数"></CommonTitleComponent>
        <div class="parameter_List">
            <div class="parameter_List_box">
                <div v-for="(item,index) in state.parametersList1" :key="index">
                    <div>
                        <img :src="item.img" alt="">
                    </div>
                    <div>
                        <span>{{ item.name }}</span>
                        <div>
                            <span>{{ item.num }}<i>{{ item.unit }}</i></span>
                            <span>{{ item.nature }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div v-for="(item,index) in state.parametersList2" :key="index">
                    <div>
                        <img :src="item.img" alt="">
                    </div>
                    <div>
                        <span>{{ item.name }}</span>
                        <div>
                            <span>{{ item.num }}<i>{{ item.unit }}</i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import windSpeedicon from '@/assets/image/windspeedicon.png'
import windDirection from '@/assets/image/windDirection.png'
import temperature from '@/assets/image/temperature.png'
import humidity from '@/assets/image/humidity.png'
import airPressure from '@/assets/image/airpressure.png'
const state = reactive({
    parametersList1: [
        { img: windSpeedicon, name: '风速',num:1.27,nature:'软风',unit:'m/s' },
        { img: windDirection, name: '风向',num:278.28,nature:'西',unit:'°' },
    ],
    parametersList2: [
        { img: temperature, name: '温度',num:181,unit:'℃' },
        { img: humidity, name: '湿度',num:48.07,unit:'' },
        { img: airPressure, name: '气压',num:102.31,unit:'' },
    ]
});
</script>

<style scoped lang="scss">
.meteorological_parameters {
    height: 100%;
    padding-top: 17px;

    .parameter_List {
        padding-top: 16px;
        height: calc(100% - 16px);
        > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: calc(50% - 10px);
            > div {
                height: 100%;
                width: calc(100% / 3);
                border-right: 1px #73BDF7 dashed;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 12px;
                padding-right: 12px;
                > div {
                    &:nth-of-type(1) {
                        width: 34px;
                        height: 82%;
                        margin-right: 14px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    &:nth-of-type(2) {
                        width:calc(100% - 48px);
                        >span{
                            @include fontCustomStyle(#fff, 12px);
                            display: block;
                            width: 100%;
                        }
                        >div{
                            width: 100%;
                            margin-top: 8px;
                            line-height: 10px;
                            line-height: 10px;
                            >span{
                                &:nth-of-type(1){
                                    @include fontCustomStyle(#1B93FB, 16px);
                                    font-family: PangMenZhengDao;
                                    i{
                                        font-style: normal;
                                        font-size: 12px;
                                    }
                                }
                                &:nth-of-type(2){
                                    margin-left: 12px;
                                    @include fontCustomStyle(#fff, 12px);
                                }
                            }
                        }
                    }
                }

                &:last-child {
                    border-right: none;
                    padding-right: 0;
                }
                &:first-child{
                    padding-left: 0;
                }
            }
        }
        .parameter_List_box {
            margin-bottom: 16px;
            >div{
                width: calc(100% / 2);
                &:nth-of-type(2){
                    padding-left: 30px;
                }
            }
        }

    }
}
</style>